<template>
    <div class="home">

        <div class="home-heade">
            <van-search
            v-model="keyValue"
            placeholder="请输入搜索关键字"
            show-action
            @search="onSearch"
            >
            <template #action>
                <div @click="onSearch">搜索</div>
            </template>
            </van-search>
        </div>

        <div class="home-swipe">
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(item, index) in images" :key="index" class="swipe-item">
                    <img :src="item.image" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="home-button">
            <van-grid :column-num="4" :border="false">
                <van-grid-item v-for="(item,index) in buttons" :key="index">
                <div @click="buttonsJump" :data-name="item.name">
                    <van-image width="1.0666667rem" height="1.0666667rem" :src="item.icon.url" />
                    <div class="fz-12 c3 mt-8">{{item.text}}</div>
                </div>
                </van-grid-item>
            </van-grid>
        </div>

        <div class="home-tabbar">
            <tab :tabList="tabList" @changTab='changTab'>
                <div class="home-product flex-wrap flex-jus" v-if="tabList[0].isActive">
                    <div class="product-img" v-for="item in productList" :key="item.id">
                        <van-image fit="cover" height="3.46666rem" width="4.613333rem" src="../../assets/images/product/product.jpg"></van-image>
                        <div class="product-info fz-16">
                            <div class="info-title flex flex-jus">
                                <div>{{item.title}}</div>
                                <div>1.1KM</div>
                            </div>
                            <div class="info-volume fz-14 flex flex-jus">
                                <div>￥128.00</div>
                                <div>销量：1145</div>
                            </div>
                            <div class="info-place fz-12">
                                <van-icon name="location-o" />
                                广州市天河区桃园路254号
                            </div>
                     </div>
                </div>
                </div>
                <div class="store_wrapper" v-else-if="tabList[1].isActive">
                    <div class="store">
                        <div class="store_introduced flex">
                            <div class="img_box">
                                <img src="../../assets/images/buttons/1.png" alt="">
                            </div>
                            <div class="store_info flex1">
                                <div class="store_name fw-600 fz-16 pb-10">门店名称</div>
                                <div class="store_detail fz-14 text-elis">门店介绍门店介绍门店介绍门绍门绍门绍门绍门绍门绍门绍门绍门绍门绍门绍门绍门绍门绍门tei</div>
                            </div>
                        </div>
                        <div class="store_location fz-12 flex flex-jus">
                            <div>
                            <van-icon name="location-o" />
                            广州市天河区桃园路254号
                            <span>1.1KM</span>
                            </div>
                            <div class="store_btn">进店</div>
                        </div>
                    </div>
                </div>
                <div class="store_activity flex-wrap flex-jus" v-else>
                        <div class="activity_goods">
                        <div class="goods_img">
                            <van-image fit="cover" height="3.46666rem" width="4.613333rem" src="../../assets/images/buttons/1.png"></van-image>
                        </div>
                        <div class="goods_box">
                            <div class="goods_heade flex flex-jus ptb-15 fz-14">
                                <div class="goods_title">商品标题</div>
                                <div class="goods_pin">拼团</div>
                            </div>
                            <div class="goods_info flex flex-jus fz-12">
                                <div class="goods_price">￥128.00</div>
                                <div class="goods_num"><span>销量：1145</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </tab>
        </div>
    </div>
</template>

<script>
import tab from '@/components/home/tab.vue'
export default {
    name:'home',
    components: {
        tab
    },
    data(){
        return {
            keyValue: '',
            images: [
                {
                    image: 'https://img.yzcdn.cn/vant/apple-1.jpg',
                    id: 0
                },
                {
                    image:  'https://img.yzcdn.cn/vant/apple-2.jpg',
                    id: 1
                },
             ],
             buttons:[
                 {
                     id:0,
                     text:'全部门店',
                     icon:{url:require('../../assets/images/buttons/1.png')}
                 },
                {
                     id:1,
                     text:'平台自营',
                     icon:{url:require('../../assets/images/buttons/1.png')}

                 },
                           {
                     id:2,
                     text:'公告通知',
                     icon:{url:require('../../assets/images/buttons/1.png')}

                 },
                 {
                     id:3,
                     text:'平台介绍',
                     icon:{url:require('../../assets/images/buttons/1.png')}

                 }
             ],
             tabList:[
                 {
                     id:0,
                     value:'距离',
                     isActive:true
                 },
                 {
                     id:1,
                     value:'周边可用豆',
                     isActive:false
                 },
                 {
                     id:2,
                     value:'活动',
                     isActive:false
                 }
             ],
             productList:[
                 {
                    categoryId:1,
                    image:require('../../assets/images/product/product.jpg'),
                    title:'商品标题',
                    coordinate:'1.1KM',
                    price:'128',
                    sales:'1145',
                    location:'广州市天河区桃园路254号'
                 },
                {
                    categoryId:1,
                    image:require('../../assets/images/product/product.jpg'),
                    title:'商品标题',
                    coordinate:'1.1KM',
                    price:'128',
                    sales:'1145',
                    location:'广州市天河区桃园路254号'
                },
                {
                    categoryId:1,
                    image:require('../../assets/images/product/product.jpg'),
                    title:'商品标题',
                    coordinate:'1.1KM',
                    price:'128',
                    sales:'1145',
                    location:'广州市天河区桃园路254号'
                },
             ]
        }
        
    },
    methods: {
        onSearch() {
            console.log(this.keyValue);
        },
        buttonsJump() {
            console.log('1');
            
        },
        changTab(index){
            this.tabList.forEach((v,i)=>{i===index?v.isActive=true:v.isActive=false});
            console.log(this.tabList);    
        }
    }
}
</script>

<style lang="less" scoped>
    .home {
        padding-bottom: 50px;
    }
    .van-search__content {
        border-radius: 40px;
    }
    .home-swipe {
        padding: 0 12px;
        img {
            width: 100%;
        }
    }
    .home-button {
        padding: 0 30px;
    }
    .home-product {
        .product-img {
            margin-bottom: 10px;
        }
        img {
            width: 173px;
            height: 130px;
            margin-bottom: 8px;
        }
        .info-volume {
            padding: 8px 0;
        }
    }
    .store_wrapper {
        .store {
            border-radius: 8px;
            padding: 10px;
            .store_introduced {
                margin-bottom: 14px;
                .store_info {
                    overflow: hidden;;
                }
            }
            .img_box {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                margin-right: 18px;
                img {
                    width: 100%;
                }
            }
            .store_location span:last-child {
                padding: 0 8px;
            }
            .store_btn {
                width: 40px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                border-radius: 20px;
                border: 1px solid #666;
            }
        }
    }
    .store_activity {
        .activity_goods {
            width: calc(50% - 12px);
            .goods_img {
                img{
                width: 173px;
                height: 130px;
                }
            }
            .goods_pin {
                width: 40px;
                height: 20px;
                border-radius: 10px;
                text-align: center;
                background-color: red;
                color: #fff;
            }
        }
    }

</style>